@import './util.scss';

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  color: #333;
  font-family: 'pingfangsc-regular', sans-serif !important;
}

a {
  text-decoration: none;
}

@font-face {
  font-family: 'pingfangsc-meduim';
  font-style: normal;
  src: url('./fonts/pingfang-zhong.subset.ttf');
}

@font-face {
  font-family: 'pingfangsc-single';
  font-style: normal;
  src: url('./fonts/pingfang-xi.subset.ttf');
}

@font-face {
  font-family: 'pingfangsc-regular';
  font-style: normal;
  src: url('./fonts/pingfang-changgui.subset.ttf');
}

.card {
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.app-container {
  padding: 15px;
  background-color: #F2F3F5;
  height: calc(100vh - 60px)
  // height: 100%;
}

.bg-container {
  background-color: white;
  padding: 15px 15px 10px 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  height: 100%;
  overflow: scroll;
}

.components-container {
  margin: 30px 50px;
  position: relative;
}

.text-center {
  text-align: center;
}

.bottom-container {
  text-align: center;
  margin: 15px 0;
  width: 100%;
}

:deep(.el-descriptions__label) {
  width: 150px;
}

.sub-navbar {
  height: 50px;
  line-height: 50px;
  position: relative;
  width: 100%;
  text-align: right;
  padding-right: 20px;
  transition: 600ms ease position;
  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);

  .subtitle {
    font-size: 20px;
    color: #fff;
  }

  &.draft {
    background: #d0d0d0;
  }

  &.deleted {
    background: #d0d0d0;
  }
}

.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;

  &:hover {
    color: rgb(32, 160, 255);
  }
}

.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}

.main-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.form-box {
  width: 600px;
}

// 超出行数，自动显示行尾省略号，最多5行
// 来自uview-plus的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
@for $i from 1 through 5 {
  .cus-line-#{$i} {
    // vue下，单行和多行显示省略号需要单独处理
    @if $i == 1 {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    } @else {
      display: -webkit-box !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: $i;
      -webkit-box-orient: vertical !important;
    }
  }
}

.flex-center {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.full-bar {
  height: 100%;
  width: 100%;
}

.col-padding {
  padding: 10px;
}

.gap {
  padding: 7.5px;
}

input {
  border: none;
  outline: none;
  background-color: transparent;
}

input:-webkit-autofill {
  -webkit-text-fill-color: #303133;
  transition: background-color 50000s ease-in-out 0s;
}